<template>
	<view class="news">
		<view class="uni-list" v-if="list.length">
						<view class="itemWrap" :class="{'borderBottom':key===list.length-1}" hover-class="uni-list-cell-hover" v-for="(item,key) in list" :key="key" @click="goDetail(item)">
										<view class="item">
													<view v-if="item.bigCoverImage" class="bigImg_cell">
														<view class="uni-media-list-body">
															<view class="uni-media-list-text-top">{{item.title}}</view>
															<view class="uni-media-list-text-bottom">
																<text>{{item.createTime}}</text>
																<text>{{item.source}}</text>
															</view>
														</view>
														<image :src="item.bigCoverImage" mode="aspectFill"></image>
														
													</view>
													
													
													<view v-if="!item.bigCoverImage&&item.smallCoverImage" class="smallImg_cell">
														<image class="uni-media-list-logo" :src="item.smallCoverImage" mode="aspectFill"></image>
														<view class="uni-media-list-body">
															<view class="uni-media-list-text-top">{{item.title}}</view>
															<view class="uni-media-list-text-bottom">
																<text>{{item.createTime}}</text>
																<text>{{item.source}}</text>
															</view>
														</view>
													</view>
													
													<view v-if="!item.bigCoverImage&&!item.smallCoverImage" class="noImg_cell">
														 <view class="uni-media-list-text-top">{{item.title}}</view>
														 <view class="uni-media-list-text-bottom">
															<text>{{item.createTime}}</text>
															<text>{{item.source}}</text>
														 </view>
													</view>
										</view>
						</view>
						<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
						<view class="uni-loadmore loadfinished" v-if="finished">- 没有更多内容了 -</view>
						
		</view>
		<view class="nodata" v-if="nodata">
			暂无资讯
		</view>
		<!-- <view class="bottomShadow">
		</view> -->
	</view>
</template>

<script>
var dateUtils = require('../../common/util.js').dateUtils;
var util = require('../../common/util.js');
export default {
    data() {
        return {
            params: {
                newsType: 'normal',
                start: 0,
                limit: 10
            },
            loading: false,
            finished: false,
            loadMoreText: '加载中...',
            showLoadMore: false,
            nodata: false,
            list: []
        };
    },
    methods: {
        goDetail(e) {
            uni.navigateTo({
                url: './newsDetail?id=' + e.newsId
            });
        },
        formatTime(timstamp) {
            // console.log(this.lastOrder.createTime)
            return util.formatTime(timstamp);
        },

        getList() {
            //             uni.showLoading({
            //                 title: '正在加载...'
            //             });
            this.loading = true;
            util.ajax(
                'news',
                this.params,
                data => {
                    // uni.hideLoading();
                    let json = data.data;
                    if (json.status) {
                        // console.log(json.data)
                        if (0 == this.params.start) this.list = [];
                        for (let i = 0; i < json.data.length; i++) {
                            json.data[i].createTime = this.formatTime(json.data[i].createTime);
                            this.list.push(json.data[i]);
                        }
                        uni.stopPullDownRefresh();

                        // console.log(this.list);

                        if (this.list.length === 0) {
                            this.nodata = true; //无数据
                        } else {
                            this.nodata = false;
                        }
                        // 加载状态结束
                        this.loading = false;
                        if (json.data.length < this.params.limit) {
                            this.finished = true;
                            this.showLoadMore = false;
                        }
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        }
    },
    onLoad() {
        this.getList();
    },
    onPullDownRefresh() {
        this.params.start = 0;
        this.getList();
        this.finished = false;
    },
    onUnload() {
        this.list = [];

        this.showLoadMore = false;
    },
    onReachBottom() {
        console.log('onReachBottom');
        if (!this.finished) {
            this.showLoadMore = true;
            setTimeout(() => {
                this.params.start += this.params.limit;
                this.getList();
            }, 300);
        }
    }
};
</script>

<style lang="less">
@import '../../common/icon.css';

.uni-loadmore {
    justify-content: center;
    align-items: center;
}
.loadfinished {
    padding: 30upx 0;
    color: #999999;
}
.bottomShadow {
    width: 100%;
    height: 10upx;
    background: #000000;
    position: absolute;
    bottom: 100upx;
}
.news {
    flex: 1;
    flex-direction: column;
    width: 100%;
    position: relative;
    .nodata {
        height: 100%;
        margin-top: 50%;
        align-items: center;
        justify-content: center;
        color: #cccccc;
    }
    .uni-list {
        width: 100%;
        .itemWrap {
            width: 100%;
            padding: 0 30upx;
            box-sizing: border-box;

            .item {
                width: 100%;
                padding: 40upx 0 35upx;
                box-sizing: border-box;
                border-bottom: 1px solid #eeeeee;
                .smallImg_cell {
                    .uni-media-list-logo {
                        width: 180upx;
                        height: 140upx;
                        border-radius: 8upx;
                    }

                    .uni-media-list-body {
                        height: auto;
                        justify-content: space-around;
                    }

                    .uni-media-list-text-top {
                        height: auto;
                        font-size: 34upx;
                        font-weight: 600;
                        line-height: 50upx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }

                    .uni-media-list-text-bottom {
                        font-size: 20upx;
                        display: flex;
                        flex-direction: row;
                        margin-top: 5upx;
                        text {
                            margin-right: 20upx;
                        }
                    }
                }
                .bigImg_cell {
                    width: 100%;
                    flex-direction: column;
                    .uni-media-list-body {
                        height: auto;
                        flex-direction: column;
                        .uni-media-list-text-top {
                            height: auto;
                            font-size: 34upx;
                            font-weight: 600;
                            line-height: 50upx;
                        }
                        .uni-media-list-text-bottom {
                            font-size: 20upx;
                            margin: 16upx 0 28upx;
                            text {
                                margin-right: 20upx;
                            }
                        }
                    }
                    image {
                        width: 100%;
                        height: 300upx;
                        border-radius: 10upx;
                    }
                }
                .noImg_cell {
                    flex-direction: column;
                    .uni-media-list-text-top {
                        height: auto;
                        font-size: 34upx;
                        font-weight: 600;
                        line-height: 50upx;
                        margin-bottom: 20upx;
                    }
                    .uni-media-list-text-bottom {
                        font-size: 20upx;
                        text {
                            margin-right: 20upx;
                        }
                    }
                }
            }
        }
        .borderBottom {
            .item {
                border: none;
                padding-bottom: 0;
            }
        }
    }
}
</style>
